<template>
  <page-wrap back title="AI面评" hide-tab stay-still :hideSafeArea="true" :bg-color="uNavColor">
    <InterViewNavbg/>
    <view class="header">
      <viwe class="header-btn" @tap="clickHeader(0)">
        <image class="header-btn-img" :src="aiCreatImg"></image>
        <text class="header-btn-tit">我的题库</text>
      </viwe>

      <viwe class="header-btn" @tap="clickHeader(1)">
        <image class="header-btn-img" :src="aiRelustImg"></image>
        <text class="header-btn-tit">面试结果</text>
      </viwe>

      <viwe class="header-btn" @tap="clickHeader(2)">
        <image class="header-btn-img" :src="aiRecodeImg"></image>
        <text class="header-btn-tit">全部面试</text>
      </viwe>
    </view>
    <view class="section-title">进行中的面试</view>
    <scroll-view
      class="scrollView"
      :style="{ height: scrollViewHeight + 'px' }"
      scroll-y
      enable-flex
      @scrolltolower="loadMore"
      :refresher-triggered="triggered"
    >
      <InterviewCell
        v-for="(item, index) in list"
        :key="index"
        :itemObj="item"
        @cellTap="clickCell"
        @interviewBtn="clickCellInterviewBtn"
      />
      <u-loadmore
        v-if="list.length || !loaded"
        class="list-more"
        :status="moreLoading"
        :load-text="loadText"
      />
      <Empty
        v-if="loaded && !list.length"
        :baseImg="emptyImg"
        text="暂无列表~"
        :fontWeight="400"
      />
      <view :style="[{height:'150rpx'}]"></view>
    </scroll-view>
    <u-button class="tool" shape="circle" type="warning" @click="clickHeader(3)">创建面试</u-button>

    <InterviewShareView :show.sync="shareShow" :itemObj="shareObj" @close="shareClose"/>
  </page-wrap>
</template>

<script>
import { getCompanyInterviewData } from "@/api/modules/company.js";
import Empty from "@/components/Empty.vue";
import InterviewCell from "./components/InterviewCell.vue";
import InterviewShareView from "./components/InterviewShareView.vue";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    Empty,
    InterviewCell,
    InterviewShareView,
    InterViewNavbg,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      scrollTop: 0,
      exampleImg: this.$imgBaseSelf + "resume/example.png",
      list: [],
      shareShow: false,
      shareObj: {},
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      loaded: false,
      moreLoading: "loadmore",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      triggered: false,

      aiCreatImg: this.$imgBaseSelf + "interview/aiCreat.png",
      aiRecodeImg: this.$imgBaseSelf + "interview/aiRecode.png",
      aiRelustImg: this.$imgBaseSelf + "interview/aiRelust.png",
      scrollViewHeight:0,
    };
  },
  onShow() {
    // this.loaded = true;
    // this.loadEnd = true;
    this.getData(false);
  },
  mounted() {
    this.scrollHeight();
  },
  // onLoad() {
  //     this._freshing = false;
  //     setTimeout(() => {
  //         this.triggered = true;
  //     }, 1000)
  // },
  methods: {
    scrollHeight() {
      const { screenHeight } = uni.getSystemInfoSync();
      uni
        .createSelectorQuery()
        .in(this)
        .select(".section-title")
        .boundingClientRect((rect) => {
          this.scrollViewHeight = screenHeight - rect.height-rect.top - uni.upx2px(10);
        })
        .exec();
    },
    clickHeader(index) {
      if (index == 0) {
        uni.navigateTo({
          url: "/pagesSub/companyCenter/interviewAI/interviewQuestionBank",
        });
      } else if (index == 1) {
        uni.navigateTo({
          url: "/pagesSub/companyCenter/interviewAI/AIInterviewResultList",
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pagesSub/companyCenter/interviewAI/interviewNotes",
        });
      }else {
        uni.navigateTo({
          url: "/pagesSub/companyCenter/interviewAI/interviewCreate",
        });
      }
    },
    clickCell(item) {
      uni.navigateTo({
        url: "/pagesSub/companyCenter/interviewAI/interviewDetail?data=" + JSON.stringify(item),
      });
    },
    clickCellInterviewBtn(item) {
      this.shareObj = item;
      this.shareShow = true;
    },
    shareClose() {
      this.shareShow = false;
    },

    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.getData(false);
    },

    // 获取列表数据
    getData(isMore) {
      if (!this.companyId) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        this.pageParams.pageNo = 1; // 刷新数据
      }
      this.moreLoading = "loading";

      let param = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        personId: this.personId,
        queryType: "interviewing",
        companyId: this.companyId,
      };
      getCompanyInterviewData(param)
        .then((res) => {
          console.log("🚀 ~ file: interviewHome.vue:198 ~ home页面数据 ~ res:", res)
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code === 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 200rpx;
  background-color: white;
  border-radius: 32rpx;
  margin: 30rpx 32rpx 5rpx;

  .header-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 33%;
    .header-btn-img {
      width: 100rpx;
      height: 100rpx;
      margin-left: 28%;
    }

    .header-btn-tit {
      margin-top: 20rpx;
      text-align: center;
    }
  }
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 30rpx 20rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  height: 200rpx;

  .list-cell-left {
    display: flex;
    width: 70%;
    flex-direction: column;
    justify-content: center;
  }
  .list-cell-right {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: blue;
  }
}

.tool {
    height: 100rpx;
    position: absolute;
    bottom: 50rpx;
    left: 160rpx;
    right: 160rpx;
  }
.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 410rpx);
}

.section-title {
  margin-left: 32rpx;
  margin-top: 40rpx;
  font-size: 14px;
  color: #222;

}
</style>
